ShowTable of Contents
Webサイト：OpenNTF
検索
Webブラウザで以下のURLにアクセスし、「XPages△namepicker」（△：スペース）で検索する
http://www.openntf.org/Internal/home.nsf
【OpenNTF－TOPページ】
【検索結果画面】
テンプレートダウンロード
「yn_xnamepicker_11a.zip」をダウンロードする
【Releasesページ】
機能概要
ドミノディレクトリ検索機能
検索フィールドに入力されたキーワードに従って、ドミノディレクトリを検索します。
該当するユーザ名があれば検索結果を表示します。
ドミノディレクトリ設定機能
検索結果の中から選択したユーザを設定フィールドに設定します。
ユーザ削除機能
選択されたユーザの横にある「×」ボタンをクリックすることで選択を解除します。
データベース構成
本アプリケーションは、以下の設計要素で構成されています。
XPage－Test
カスタムコントロール「youatnotesNamepicker」を表示する
カスタムコントロール－youatnotesNamepicker
ドミノディレクトリの検索を行うカスタムコントロール
検索パネル－ynNamepickerInput
検索結果パネル－ynNamepickerResultPanel
※ Lotus Domino にランゲージパック「日本語」が適用されている場合は、以下の修正が必要です。
(修正前) rowData.getColumnValue("FullName")
(修正後) rowData.getColumnValue("フルネーム")
スクリプトライブラリ
ユーザ追加処理
function ynNamepickerAddName(e) {
ynNamepickerClick = 1;
//id = "view:_id1:ynNamepickerNames";
newname = e.innerHTML;
//alert(newname+" id="+id);
//dojo.byId(id)
nameElem = dojo.query("[id$='ynNamepickerNames']")[0];
v = nameElem.value;
if (typeof v != "undefined" && v != "") {
if (v.indexOf(newname) == -1) v = v + ", "+newname;
} else {
v = newname;
}
v = v.split(",");
nameElem.value = v;
ynNamepickerRefreshDisplay(); //画面リフレッシュ処理
}
画面リフレッシュ処理
function ynNamepickerRefreshDisplay() {
nameElem = dojo.query("[id$='ynNamepickerNames']")[0];
v = nameElem.value;
if (v == "") return;
v = v.split(",");
html = "";
var displayName;
for (i = 0; i < v.length; i++) {
if (v[i].indexOf("/") > 0) {
displayName = (v[i].indexOf("/")?v[i].substring(0, v[i].indexOf("/")) : v[i]);
} else {
displayName = v[i];
}
html += '<li>'+displayName+'<span onClick="ynNamepickerRemovename(\''+v[i]+'\')"
class="ynNamepickerRemover">x</span></li>';
}
elem = dojo.byId("ynNamepickerDisplay");
elem.innerHTML = html;
}
CSS デザイン
カスタムコントロール内に、CSS が直接入力されているので、本値を変更することでデザインを修正することができます。
処理概要
初期表示処理
XPageを開く
Webブラウザ上に以下のURLを入力し、XPageを開きます。
http://localhost/yn_xnamepicker.nsf/test.xsp
カスタムコントロールを開く
XPageをオープンすると、その中に埋め込まれているyouatnotesNamePickerカスタムコントロール
が開かれます。
初期化
カスタムコントロールをロードする際に、セッションスコープ変数「ynNamepickerResult」を
初期化する
ライブラリの読み込み
JavaScriptライブラリ「ynNamepicker.js」を読み込みます。
<xp:this.resources>
<xp:script src="/ynNamepicker.js" clientSide="true"></xp:script>
</xp:this.resources>
画面表示
パネル「ynNamepickerInput」の内容が表示される。
パネル「ynNamepickerResultPanel」の内容が表示される。
初期化関数を呼び出す。
dojo.addOnLoad()で、HTMLページが読み込まれた後に呼び出される初期化関数を指定します。
<script type="text/javascript">
dojo.addOnLoad(ynNamepickerInit);
</script>
|
|
|
dojo.addOnLoad()は、bodyタグにonLoad属性を書く方法と、windows.onLoad()を利用する方法と同じ動作をする。
しかし、Dojoではwindows.onLoadを上書きしているため、dojo.addOnLoadで呼び出す必要がある。
|
ynNamepickerInit()の実行
「4.1.4. ライブラリの読み込み」で読み込んだJavaScriptライブラリのynNamepickerInit()を実行する。
1) カスタムコントロールの <div> オブジェクトを取得し、非表示とする。
elem = dojo.byId("ynNamepickerResultBox");
dojo.style(elem, {display: 'none'});
2) <div> オブジェクトの onclick イベントが呼び出された時に、実行されるメソッドを定義する。
dojo.connect(elem, "onclick", null, function(e) {
if (ynNamepickerClick == 0) ynNamepickerHideResult; else ynNamepickerClick = 0;
});
3) カスタムコントロールの <div> オブジェクトを取得し、onkeyupイベントが呼び出された時に、
ynNamepickerHandleKey()を実行するように定義する。
elem = dojo.byId("ynNamepickerDisplayBox");
dojo.connect(elem, "onkeyup", null, function(e) {
ynNamepickerHandleKey(e);
});
4) カスタムコントロールの <div> オブジェクトを取得し、onkeyupイベントが呼び出された時に、
ynNamepickerHandleKey()を実行するように定義する。
elem = dojo.byId("ynNamepickerResultBox");
dojo.connect(elem, "onkeyup", null, function(e) {
ynNamepickerHandleKey(e);
});
ynNamepickerRefreshDisplay()の実行
「4.1.4. ライブラリの読み込み」で読み込んだJavaScriptライブラリのynNamepickerRefreshDisplay ()を実行する。
1) カスタムコントロールに定義されたynNamepickerNames要素を取得する。
|
|
|
dojo.query()は、CSS3のセレクタを表す文字列を引数に取り、NodeListというクラスのインスタンスを返す。
|
2) ynNamepickerNames要素が空白のため、以下の処理は実行されない。
if (v == "") return;
v = v.split(",");
html = "";
var displayName;
for (i = 0; i < v.length; i++) {
if (v[i].indexOf("/") > 0) {
displayName = (v[i].indexOf("/")?v[i].substring(0, v[i].indexOf("/")) : v[i]);
} else {
displayName = v[i];
}
html+='<li>'+displayName+'<span onClick="ynNamepickerRemovename(\''+v[i]+'\')"
class="ynNamepickerRemover">x</span></li>';
}
3) ynNamepickerDisplay要素のHTMLを「null値」に入れ替える。
elem = dojo.byId("ynNamepickerDisplay");
elem.innerHTML = html;
検索処理
XPageを開く
Webブラウザ上に以下のURLを入力し、XPageを開きます。
http://localhost/yn_xnamepicker.nsf/test.xsp
検索条件を入力して、検索する
検索ボタンをクリックしたタイミングで、カスタムコントロールのynNamepickerResultPanel パネルを部分更新する。
<xp:button id="bynNamepickerSearch">
<xp:this.value>
<![CDATA[#{javascript:var v = compositeData.get("buttonSearchLabel");
(v == null || v == "") ? "search" : v}]]>
</xp:this.value>
<xp:this.rendered>
<![CDATA[#{javascript:var v = compositeData.get("buttonSearchVisible");
(v == null) ? true : v}]]>
</xp:this.rendered>
<xp:eventHandler event="onclick" submit="true" refreshMode="partial"
refreshId="ynNamepickerResultPanel">
</xp:eventHandler>
</xp:button>
検索結果を取得する
1) サーバ上のドミノディレクトリにある「($VIMPeople)」ビューを以下のキーワードで検索する。
2) ビューの検索結果を「ynPeople」に代入する。
<xp:this.data>
<xp:dominoView viewName="($VIMPeople)" var="ynPeople">
<xp:this.databaseName>
<![CDATA[#{javascript:database.getServer()+"!!names.nsf"}]]>
</xp:this.databaseName>
<xp:this.search>
<![CDATA[#{javascript:
var q = viewScope.get("ynNamepickerQ");
if (q != null && q != "") "[FullName] = "+q+"*"; else "[YNDUMMY] = ##NONE##";
}]]>
</xp:this.search>
</xp:dominoView>
</xp:this.data>
検索結果「ynPeople」を @nowiki@5 タグで１つずつ表示する
<ul id="ynNamepickerResult" class="ynNamepickerResult">
<xp:repeat id="repeat1" rows="50" value="#{ynPeople}" var="rowData" indexVar="rowIndex">
<xp:text escape="false" id="computedField1">
<xp:this.value>
<![CDATA[#{javascript:'<li class="ynNamepickerLi"
onMouseover="dojo.addClass(this, \'ynNamepickerResultActive\')"
onMouseout="dojo.removeClass(this, \'ynNamepickerResultActive\')"
onClick="ynNamepickerAddName(this)">'
+rowData.getColumnValue("フルネーム")+"</li>"}]]>
</xp:this.value>
</xp:text>
</xp:repeat>
</ul>
検索結果の @nowiki@7 タグをクリックし、ynNamepickerAddName(this)を実行する
クリックしたユーザ名の <li> タグをynNamepickerNamesオブジェクトに「，」区切りで入力する。
function ynNamepickerAddName(e) {
ynNamepickerClick = 1;
//id = "view:_id1:ynNamepickerNames";
newname = e.innerHTML;
//alert(newname+" id="+id);
//dojo.byId(id)
nameElem = dojo.query("[id$='ynNamepickerNames']")[0];
v = nameElem.value;
if (typeof v != "undefined" && v != "") {
if (v.indexOf(newname) == -1) v = v + ", "+newname;
} else {
v = newname;
}
v = v.split(",");
nameElem.value = v;
ynNamepickerRefreshDisplay();
}
ynNamepickerRefreshDisplay()の実行
「4.1.4.」で読み込んだJavaScriptライブラリのynNamepickerRefreshDisplay ()を実行する。
1) カスタムコントロールに定義されたynNamepickerNames要素を取得する。
<li> タグが「，」区切りで入力されている。
2) ynNamepickerNames要素に <li> タグが入力されているため、以下の処理が実行される。
ドミノディレクトリから取得されたユーザ名を変換して、 <li> タグ ＋ <span> タグに置き換える。
if (v == "") return;
v = v.split(",");
html = "";
var displayName;
for (i = 0; i < v.length; i++) {
if (v[i].indexOf("/") > 0) {
displayName = (v[i].indexOf("/")?v[i].substring(0, v[i].indexOf("/")) : v[i]);
} else {
displayName = v[i];
}
html+='<li>'+displayName+'<span onClick="ynNamepickerRemovename(\''+v[i]+'\')"
class="ynNamepickerRemover">x</span></li>';
}
3) ynNamepickerDisplay要素のHTMLを上記で変換したものに入れ替える。
elem = dojo.byId("ynNamepickerDisplay");
elem.innerHTML = html;